{% extends "tj3/tj3.html" %}

{% block navigation %}
<script type="text/javascript">
	var my_start;
	var my_end;
	
	$(document).ready(function() {
		$('#mymodal').hide();
			
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();
	
		var calendar = $('#calendar').fullCalendar({
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			selectable: true,
			selectHelper: true,
			
			events:{
        		url: '{% url project_calendar_feeder project.id %}',
        		type: 'POST',
        		data: {
        		},
        		error: function() {
            		alert('there was an error while fetching events!');
        		},
        		//color: 'yellow',   // a non-ajax option
        		//textColor: 'black' // a non-ajax option
    		},
			editable: true,

			// This is to create new event/booking-journal
			select: function(start, end, allDay) {
				$("#mymodal").modal({
					opacity:80,
					overlayCss: {backgroundColor:"#fff"}
				});
				my_start=start;				
				calendar.fullCalendar('unselect');
			},
			
			eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {
				// Post the changes to the server
				// All we need to know is the new start time. Duration has not been changed.
				// event.end will be None actually.
								
				var json_event=$.toJSON({'id':event.id,'title':event.title,'start':event.start, 'end':event.end, 'dayDelta':dayDelta});
				$.post("{% url project_calendar_booking %}",
					{'data':json_event},
					function (data){
				});
			},
			eventResize:  function(event,dayDelta,minuteDelta,revertFunc) {				
				// Post the changes to the server
				// We need to have the new start and end to compute new duration!
				var json_event=$.toJSON({'id':event.id,'title':event.title,'start':event.start,'end':event.end});
				$.post("{% url project_calendar_booking %}",
					{'data':json_event},
					function (data){
				});
			},
			
		});
		
		$('#create_btn').click(function(){
			var task_id;
			var resource_id;
			var summary;
			var description;
			var title;
			
			task_id=$('#task').text();
			resource_id=$('#resource').text();
			summary=$('#summary').val();
			description=$('textarea[name=description]').val();
			title='sdsdf('+task_id+','+resource_id+'):'+summary+'.'+description;
			
			// Post the new event to the server!
			var json_event=$.toJSON({'title':title, 'start':my_start, 'end':''});
			$.post("{% url project_calendar_booking %}",
				{'data':json_event},
				function (data){
					//alert(data);
					var event=data['event'];
					$('#calendar').fullCalendar('renderEvent',event,true);
			});		
		});


	});

	function revertFunc(){
	
	}
</script>

</script>

{% endblock navigation %}


{% block content  %} 
<h1 class="ui-widget ui-widget-header">{{project.name}}/{{task.name}}
	<span class="float_right">
	Logging Bookings For {{resource.first_name|capfirst}} {{resource.last_name|capfirst}}
	</span>
</h1>
<br />

<div id='calendar'></div>
<br />

<div>
	<h1 class="ui-state-highlight ui-corner-all">Go To</h1>
	<ul>
		<li><a href="{% url task_detail task.id %}">View Task Details</a>
	</ul>
</div>

<div id="mymodal" style="color:white;">
	<table>
		<tr><td>Task:<td><span id="task" hidden>{{task.id}}</span>{{task.name}}
		<tr><td>Resource:<td><span id="resource" hidden>{{resource.id}}</span>{{resource.first_name|capfirst}} {{resource.last_name|capfirst}}
	</table>
	<label>Summary</label><br />
	<input id="summary" type="text" value="" /><br />
	<label>Description</label><br />
	<textarea name="description" rows="5" cols="20"></textarea><br />
	<div class="float_right">
		<input type="button" id="create_btn" value="Create" class="simplemodal-close" />
		<input type="button" id="cancel_btn" value="Cancel" class="simplemodal-close" />
	</div>
</div>
{% endblock content %}
